<template>
	<view class="home">
		<view class="box">
			<view class="box_list">
				<view class="list" style="font-size: 32rpx; ">寄出信息</view>
				<view class="flex_lr list">
					<view class="f1">快递公司</view>
					<picker style="text-align: center;" @change="change" mode="selector" :value="index" :range="list"
						range-key="express_name">
						<!-- <view style="color:#999;" v-if="index===''">请选择</view> -->
						<view :class="data.express_name?'':'text-99'">{{data.express_name?data.express_name:'请选择'}}</view>
					</picker>
				</view>
				<view class="flex_lr list">
					<view class="f1">快递单号</view>
					<view class="f1">
						<input type="text" class="list_input" placeholder="请输入" v-model="data.express_no">
					</view>
				</view>
				<view class="list" style="border: 0;">
					<view class="flex_row" style="min-height: 80rpx;">
						<view class="f1">添加图片</view>
						<view class="f1" style="margin-left: 20rpx;">非必填，限1张图片内</view>
					</view>
					<view style="margin-top: 20rpx;">
						<image :src="data.express_image" mode="" class="up_img" v-if="data.express_image"></image>
						<view @click="uploadImage" class="up_img y_center flex_center" v-else>
							<view class="f3">+</view>
							<view>上传图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box_list margin-top-40">
				<view class="list" style="font-size: 32rpx; ">寄出信息</view>
				<view class="flex_lr list">
					<view class="f1">地址</view>
					<view class="f1">{{info.address}}</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">姓名</view>
					<view class="f1">{{info.name}}</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">电话</view>
					<view class="f1">{{info.linkphone}}</view>
				</view>
				<view class="y_center">
					<view class="copybtn flex_center" @click="copy">复制信息</view>
				</view>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="y_center">
			<view @click="submit" class="box_but flex_center">确定</view>
		</view>
	</view>
</template>

<script>
	import config from '@/components/hzjc/config'
	export default {
		data() {
			return {
				list: [],
				index: '',
				info: {},
				data: {
					id: '',
					express_name: [],
					express_no: '',
					express_image: '',
				},
			}
		},
		onLoad(e) {
			console.log(e)
			if ('id' in e) {
				this.data.id = e.id
			}
			this.data.express_name = e.name?decodeURIComponent(e.name):''
			this.data.express_no = e.no?decodeURIComponent(e.no):''
			this.data.express_image = e.image?decodeURIComponent(e.image):''
			this.init()
		},
		methods: {
			init() {
				this.rq.getData('Memorder/express', {}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
				this.rq.getData('Memorder/back_info', {}).then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			change(e) {
				this.index = e.detail.value
				this.data.express_name = this.list[this.index].express_name
			},
			uploadImage() {
				var that = this
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表 tempFilePaths
						uni.showLoading()
						uni.uploadFile({
							url: config.host + 'api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var filedata = JSON.parse(uploadFileRes.data)
								that.data.express_image = filedata.data.fullurl
								uni.hideLoading()
							}
						});

					},
					fail: (err) => {
						// 处理错误情况
						console.error(err);
					}
				});
			},
			copy() {
				var text = this.info.name + ' ' + this.info.linkphone + ' ' + this.info.address
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},
			submit() {
				this.rq.getData('Memorder/refund_express', this.data).then(res => {
					if (res.code == 1) {
						this.cn.alert('提交成功').then(res => {
							uni.navigateBack({
								delta: 1
							})
						})

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.copybtn {
		width: 300rpx;
		height: 80rpx;
		font-size: 32rpx;
		border: 1rpx solid #8d8d8d;
		border-radius: 50rpx;
		margin-top: 20rpx;
	}

	.box {
		margin: 40rpx;
	}

	.service {
		border-radius: 50rpx;
		padding: 40rpx 30rpx;
		background: #000;

		.service_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.phone_img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}

	.txt {
		background: #f3f3f3;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.f1 {
		font-size: 26rpx;
	}

	.box_list {
		background: #FFF;
		box-shadow: 5px 5px 10px 0 rgba(186, 186, 186, 0.3);
		border-radius: 20px;
		padding: 40rpx 40rpx 20rpx 40rpx;

		.list {
			min-height: 80rpx;
			padding-bottom: 10rpx 0;
			margin-bottom: 10rpx;
			border-bottom: 1rpx solid #ececec;

			.list_input {
				text-align: right;
			}
		}

		.box_list_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.f2 {
			font-size: 26rpx;
		}

		.f3 {
			font-size: 75rpx;
		}

		.up_img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10px;
			background-color: #f3f5f7;
		}
	}

	.sex_box {
		border-radius: 10rpx;
		background: #000;
		color: #FFF;
		padding: 10rpx 40rpx;
	}

	.sex_box_b {
		border-radius: 10rpx;
		color: #000000;
		border: 2rpx solid #000;
		padding: 10rpx 40rpx;
	}

	.box_but {
		position: fixed;
		bottom: 100rpx;
		width: 80%;
		font-size: 34rpx;
		color: #FFF;
		padding: 30rpx 0;
		background: #000;
		border-radius: 50rpx;
	}
</style>